import React from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { Tabbar } from "react-vant";
import index from "../router/index";
export default function Tabble() {
  /* 没有该属性，拿的是undefined */
  const tabs = index.filter((item) => item.tab);
  const location = useLocation();
  const navigate = useNavigate();
  const isShow = tabs.find((item) => item.path == location.pathname);
  // console.log(location.pathname);
  return (
    <div style={{ height: "50px" }}>
      {isShow && (
        <Tabbar value={location.pathname} onChange={(v) => navigate(v)}>
          {tabs.map((item) => (
            <Tabbar.Item key={item.path} name={item.path} icon={item.tab.icon}>
              {item.tab.title}
            </Tabbar.Item>
          ))}
        </Tabbar>
      )}
    </div>
  );
}
